<template>
  <div>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="turquoise"
      text-color="black"
      active-text-color="red"
      router
    >
      <!-- 导航一 -->
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-document"></i>
          <span
            ><router-link to="/home/student_info">学生信息</router-link></span
          >
        </template>
        <div class="item_menu">
          <el-menu-item index="/home/stu_luru"> 学生信息录入</el-menu-item>
          <el-menu-item index="/home/stu_chaxun"> 学生信息查询</el-menu-item>
        </div>
      </el-submenu>
      <!-- 导航二 -->
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-folder-add"></i>
          <span>成绩录入及查询</span>
        </template>
        <el-menu-item-group>
          <template slot="title">入学</template>
          <div class="item_menu">
            <el-menu-item index="/home/ruxue_enter">入学成绩录入</el-menu-item>
            <el-menu-item index="/home/ruxue_chaxun"
              >入学个人成绩查询</el-menu-item
            >
            <el-menu-item index="/home/all_chaxun"
              >入学所有学生成绩查询</el-menu-item
            >
          </div>
        </el-menu-item-group>
        <el-menu-item-group title="期中">
          <div class="item_menu">
            <el-menu-item index="/home/qiz_luru">期中成绩录入</el-menu-item>
            <el-menu-item index="/home/qiz_chaxun"
              >期中个人成绩查询</el-menu-item
            >
            <el-menu-item index="/home/qiz_all_chaxun"
              >期中所有学生成绩查询</el-menu-item
            >
          </div>
        </el-menu-item-group>
        <el-menu-item-group title="期末">
          <div class="item_menu">
            <el-menu-item index="/home/qim_luru">期末成绩录入</el-menu-item>
            <el-menu-item index="/home/qim_chaxun">期末个人成绩查询</el-menu-item>
            <el-menu-item index="/home/qim_all_chaxun">期末所有学生成绩查询</el-menu-item>
          </div>
        </el-menu-item-group>
      </el-submenu>
      <!-- 导航三 -->
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-pie-chart"></i>
          <span><router-link to="/home/chengji_fx">成绩分析</router-link></span>
        </template>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style lang="scss" scoped>
.item_menu {
  text-align: center;
}
* {
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}
</style>